<template>
  <div class="model-container">
    <!-- 添加页面标题区域 -->
    <div class="page-header">
      <h2>中药常识</h2>
      <p class="subtitle">中药常识模型信息</p>
    </div>

    <!-- 信息列表 -->
    <el-row :gutter="20" class="model-list">
      <el-col :span="6" v-for="model in models" :key="model.id">
        <el-card class="model-card" shadow="hover">
          <img :src="model.avatar" class="image" style="height: 250px;object-fit: cover;">
          <div class="model-header">
            <h2 class="model-title">{{ model.name }}</h2>
            <span class="model-type">{{ model.type }}</span>
          </div>
          <div class="model-content">
            <p class="model-info"><strong>发布时间：</strong> {{ formatDate(model.current) }}</p>

            <el-button type="primary" style="width: 100%;" @click="viewDetail(model)">
              查看详情
            </el-button>

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from "@/api";
import {formatDate} from "@/utils/date";

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      models: [] // 信息列表数据
    };
  },
  mounted() {
    this.fetchNews();
  },
  methods: {
    formatDate,
    // 获取信息列表
    async fetchNews() {
      const response = await api.model.modelList();
      this.models = response.data.data;
    },
    // 查看信息详情
    viewDetail(e) {
      const title = JSON.stringify(e.title);
      const id = JSON.stringify(e.id);
      this.$router.push({
        path: "/user/model_detail?id=" + id,
        query: {title},
      });
    }
  }
};
</script>

<style scoped>
.model-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  color: #303133;
}

.subtitle {
  color: #909399;
  font-size: 14px;
}

.model-list {
  margin-top: 20px;
}

/*
:deep(.el-card__body) {
  padding: 10px !important;
}*/

.model-card {
  overflow: hidden;
  transition: transform 0.3s;
  margin-bottom: 20px;
}

.model-card:hover {
  transform: translateY(-5px);
}

.model-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaea;
}

.model-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 18px;
  color: #333;
}

.model-type {
  font-size: 14px;
  color: #909399;
}

.model-content {
  padding: 15px 0;
}

.model-info {
  font-size: 13px;
  color: #606266;
  margin-bottom: 10px;
}

.model-text {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.model-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.model-footer .el-button {
  font-size: 14px;
  color: #409eff;
}
</style>